<html>
<head>
  <style>
  
    @import url(../../widgets/resizeable/resizeable.css);
  
    popup#test
    {
      background-color: gold;
      border:2dip solid red;
      width:100dip;
      height:100dip;
      cursor:pointer;
    }
    
    popup#test.mouse-on-corner {
      cursor:se-resize;
    }
    
    div#anchor
    {
      border:1dip solid blue;
      width:50dip;
      height:50dip;
      cursor:pointer;
    }
  </style>  
  <style #actions>
    div#anchor
    {
      behavior: button; 
    }
  </style>    
  <script type="text/tiscript">
    
      $(div#anchor) << event click
      {
        var anchorPoint = 1; // left/bottom
        var popupPoint = 7;  // left/top
        this.popup( $(popup#test), (popupPoint << 16) | anchorPoint);
      } 
    </script>
  
</head>
<body>

    <p>This sample demonstrates popup interactive sizing.</p>

    <div#anchor> 
      click me
    </div>
    <popup#test resizeable >
      resize me
    </popup>
    

</body>
</html>